import React, { Component } from 'react'
import { Text, View, Image } from 'react-native'
import {
  Grid
} from '@ant-design/react-native'

import styles from './StyleHome'

export default class HotCate extends Component {
  render() {
    const hotCateList = Array.from(new Array(12)).map((_val, i) => ({
      icon: 'http://placehold.it/100x100',
      text: `Name${i}`,
    }));
    return (
      <View
        style={styles.HotCateWrap}
      >
        <Grid
          data={hotCateList}
          columnNum={4}
          hasLine={false}
          renderItem={(dataItem: any) => (
            <View
              style={styles.HotCateItem}
            >
              <View
                style={styles.HotCateImageWrap}
              >
                <Image 
                  style={styles.HotCateImage} 
                  source={{uri: dataItem.icon}}
                />
              </View>
              <View
                style={styles.HotCateTitleWrap}
              >
                <Text>{dataItem.text}</Text>
              </View>
            </View>
          )}
        />
      </View>
    )
  }
}
